<template>
    <div>
        <div id="head">
            <div>合规税筹</div>
            <div>国家政策大力扶持补贴/奖励/企业所得税减免</div>
            <router-link to="/consult/1/账号申请" tag="div">马上测算</router-link>
        </div>
        <div id="area">
            <div>各地优惠政策</div>
            <div id="a_box">
                <router-link to="/bj_shuichou/" tag="div">北京</router-link>
                <router-link to="/sh_shuichou/" tag="div">上海</router-link>
                <router-link to="/gz_shuichou/" tag="div">广州</router-link>
                <router-link to="/sz_shuichou/" tag="div">深圳</router-link>
            </div>
            <div id="a_other" @click="showCity()">其他城市>></div>
        </div>
        <div id="net">
            <div>互联网 + 税务服务生态系统</div>
            <div v-for="nmsg in nmsgs" :key="nmsg.title" class="nitem" :class="{ashow: $parent.scrollTop > nmsg.offsetTop}">
                <div :style="{'background-image': 'url('+ nmsg.img +')'}"></div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">{{nmsg.title}}</div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">
                    <p v-for="text in nmsg.text">{{text}}</p>
                </div>
            </div>
        </div>
        <div id="policy">
            <div id="p_dif">
                <div v-for="text in difs">{{text}}</div>
            </div>
            <div id="p_z">
                <div v-for="text in zc">{{text}}</div>
            </div>
        </div>
        <div id="msg">
            <lslide :height="8.4">
                <litem name="最新资讯">
                    <Sitem v-for="msg in zx" :key="msg.img" :msg="msg"/>
                    <more url="/news/"/>
                </litem>
                <litem name="常见问题">
                    <div style="height: 0.3rem"></div>
                    <Aitem v-for="msg in ques" :key="msg.img" margin="0 0 0.3rem" :msg="msg"/>
                    <more url="/zt/105"/>
                </litem>
            </lslide>
        </div>
    </div>
</template>
<script>
import lslide from "./public/LSlide_cs"
import litem from "./public/Litem"
import Sitem from "./public/Sitem"
import Aitem from "./public/Aitem"
import more from "./public/More"
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      nmsgs: [
        {
          img: require("../assets/shuichou/icon_0.png"),
          title: "云测算系统",
          text: [
            "了解各地人力资源，以人力资源薪税保结构为",
            "切入点，结合法财税专家的上百种方案，拥有",
            "多地财政奖励的财税"
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/shuichou/icon_1.png"),
          title: "财务中心",
          text: [
            "全国多个政策地财税中心最好的政策福利资源",
            "最适合企业行业的贴心推荐稳定高效可信",
            ""
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/shuichou/icon_2.png"),
          title: "专家团队",
          text: [
            "多年人力资源服务团队来自四大的法财税专家",
            "1V1专业顾问服务",
            ""
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        }
      ],
      difs: ["不同地区", "不同行业", "不同企业", "不同人群"],
      zc: [
        "稳岗补贴政策",
        "大学生就业补贴政策",
        "财税政策",
        "人才奖励政策",
        "残障金政策",
        "招商引资政策"
      ],
      zx: null,
      ques: null,
      msgs: [
        {
          url: "/news/0",
          img: require("../assets/home/s_item_0.jpg"),
          title: "年终奖如何合理避税 怎样合理规避年终奖个人所得税",
          time: "2018.02.01"
        },
        {
          url: "/news/1",
          img: require("../assets/home/s_item_1.jpg"),
          title: "年终奖如何合理避税 怎样合理规避年终奖个人所得税",
          time: "2018.02.01"
        },
        {
          url: "/news/2",
          img: require("../assets/home/s_item_2.jpg"),
          title: "年终奖如何合理避税 怎样合理规避年终奖个人所得税",
          time: "2018.02.01"
        }
      ]
    };
  },
  components: {
    lslide,
    litem,
    Sitem,
    Aitem,
    more
  },
  created() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
  },
  activated(){
    this.$parent.updata();
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.zx = data
    }.bind(this))
    Post(`${Port}/mobile/cms/subjects`, {
      page_size: 2
    }, function(data) {
      this.ques = data
    }.bind(this))
    var arr = Array.prototype.slice.call(this.$el.children[2].children, 1);
    var _this = this
    arr.forEach((e, i) => {
      _this.nmsgs[i].offsetTop = e.offsetTop - document.body.clientHeight * 0.8
    })
  },
  methods: {
    showCity(){
      this.$parent.cshow = true
      this.$parent.ctype = 1
    }
  }
};
</script>
<style scoped>
#head {
  height: 6.17rem;
  padding-top: 1.45rem;
  background-size: cover;
  background-image: url("~@/assets/shuichou/banner.png");
  text-align: center;
}
#head > div:nth-child(1) {
  font-size: 0.42rem;
  color: #fff;
  margin-bottom: 0.24rem;
}
#head > div:nth-child(2) {
  font-size: 0.28rem;
  color: #fff;
}
#head > div:nth-child(3) {
  display: inline-block;
  width: 2.1rem;
  height: 0.64rem;
  border: 0.01rem solid #ed5172;
  line-height: 0.64rem;
  font-size: 0.28rem;
  color: #ed5172;
  border-radius: 0.32rem;
  margin-top: 0.4rem;
}
#area {
  padding-top: 1.5rem;
  text-align: center;
}
#area > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#a_box {
  display: flex;
  justify-content: space-around;
  margin-top: 0.55rem;
}
#a_box > div {
  height: 1.25rem;
  width: 1.25rem;
  border: 0.01rem solid #ed5172;
  border-radius: 50%;
  font-size: 0.3rem;
  line-height: 1.25rem;
  color: #ed5172;
}
#a_other {
  font-size: 0.28rem;
  color: #999;
  text-align: right;
  margin: 0.55rem 0.32rem 0;
}
#net {
  padding: 1.2rem 0 0.4rem;
  text-align: center;
}
#net > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#policy {
  height: 8.3rem;
  padding-top: 2.27rem;
  background-image: url("~@/assets/shuichou/p_bg.png");
  background-size: 6.42rem 5.24rem;
  background-position: left center;
  background-repeat: no-repeat;
  background-color: #f4f5f7;
}
#policy > div {
  float: left;
}
#p_dif {
  margin-top: 0.3rem;
}
#p_dif > div {
  font-size: 0.29rem;
  color: #666;
  font-weight: bold;
  margin-bottom: 0.32rem;
}
#p_dif > div::before {
  position: relative;
  top: 0.1rem;
  margin-left: 0.9rem;
  margin-right: 0.2rem;
  content: "";
  display: inline-block;
  height: 0.46rem;
  width: 0.46rem;
  background-size: cover;
  background-image: url("~@/assets/shuichou/dot.png");
}
#p_z {
  font-size: 0.26rem;
  color: #fcfcfc;
  margin-left: 0.67rem;
}
#p_z > div {
  width: 3.09rem;
  height: 0.43rem;
  margin-bottom: 0.24rem;
  text-indent: 0.3rem;
  line-height: 0.45rem;
  background-size: cover;
  background-image: url("~@/assets/shuichou/strip.png");
}
</style>
